<style lang="stylus" scoped>
  .wraper
    background #fcfcfd
    position absolute
    top 0
    bottom 0
    width 100%
    display flex
    align-items center
    flex-direction column
    .header
      width 100%
      height 88rpx
      background #d43c33
    .scroll
      flex 1
      width 100%
      overflow hidden
    .scroll-view
      height 100%
    .swiper
      height 300rpx
      .swiper-item
        height 300rpx
      img
        width 100%
        height 100%
    .recommend
      .title
        line-height 100rpx
        text-align center
        font-size 28rpx
        color #d43c33
      .recommend-item
        display flex
        overflow hidden
        margin 0 40rpx
        margin-bottom 40rpx
        .img
          width 120rpx
          height @width
        .detail
          flex 1
          font-size 28rpx
          overflow hidden
          margin-left 40rpx
          display flex
          justify-content center
          flex-direction column
          .name
            color #333
            white-space nowrap
            overflow hidden
            text-overflow ellipsis
          .desc
            margin-top 20rpx
            color #888
            white-space nowrap
            overflow hidden
            text-overflow ellipsis

</style>

<template>
  <div class="wraper">
    <div class="header">
      <m-header :index="1"></m-header>
    </div>
    <div class="scroll">
      <scroll-view
        @scrolltoupper="bindscrolltolower"
        scroll-y
        class="scroll-view">
          <div v-show="refresh">
            <m-loading></m-loading>  
          </div>  
          <!-- banner -->
          <swiper 
            class="swiper"
            indicator-dots
            indicator-color="rgba(255, 255, 255, 0.5)"
            indicator-active-color="rgba(255, 255, 255, 0.8)"
            autoplay
            circular>
            <block v-for="(item, index) in banner" :key="index">
              <swiper-item class="swiper-item"> 
                <img class="img" :src="item.imageUrl" alt="">
              </swiper-item>
            </block>
          </swiper>`
          <!-- recommend -->
          <div class="recommend">
            <h1 class="title"> 热门歌单推荐</h1>
            <ul class="recommend-lisr">
              <block v-for="(item, index) in recommend" :key="index">
                <li class="recommend-item">
                  <img class="img" :src="item.picUrl" alt="">
                  <div class="detail">
                    <p class="name">{{item.copywriter}}</p>
                    <div class="desc">{{item.name}}</div>
                  </div>
                </li>
              </block>
            </ul>
          </div>
      </scroll-view>
    </div>
  </div>
</template>

<script>
import {mapMutations, mapGetters} from 'vuex'
import {SET_LINK_ACTIVE} from '@types'
import Fly from 'flyio/dist/npm/wx'
import MHeader from '@/components/header'
import MLoading from '@/components/loading'
const fly= new Fly;

export default {
  components: {
    MHeader,
    MLoading
  },
  onLoad() {
    this.getBanner();
    this.getRecommend();
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  data() {
    return {
      banner: [],
      recommend: [],
      refresh: false
    }
  },
  methods: {
    ...mapMutations({
      SET_LINK_ACTIVE
    }),
    async bindscrolltolower() {
      if (this.refresh) return false;
      this.refresh = true;
      await this.getBanner();
      await this.getRecommend();
      this.refresh = false;
    },
    async getBanner() {
      await fly.get('http://192.168.2.100:3000/banner')
      .then(json => {
        const {data} = json;
        this.banner = data.banners;
      })
    },
    async getRecommend() {
     await fly.get('http://192.168.2.100:3000/personalized')
      .then(json => {
        const {data} = json;
        this.recommend = data.result;
      })
    }
  }
}
</script>
